<template>
	<div class="headerContent">
		 <div class="navLogo">
			 <span class="logo" @click="$router.push('/homework')"><img src="../../assets/image/school/logo.png" alt="百师云"></span>
			 <div>
				<!-- <router-link to="/examindex" :class="{ hover: isActive('/examindex','/examoverview','/studentmanage','/teachermanage','/scorerelease','/modifygrades','/questionmanage','/templateinformation','/identificationrecord','/notuploaded','/listofabsences','/taskallocation','/reviewprogress','/monitoringoverview','/exceptionhandling','/arbitrationprocessing') }">考试管理</router-link> -->
				<router-link to="/homework" active-class="hover">作业管理</router-link>
				<router-link to="/gradescoreindex" :class="{ hover: isActive('/gradescoreindex','/academiclevelsetting','/scorerangesetting','/rankingsegmentsetting') }">成绩管理</router-link>
				<router-link to="/studentinfo">学校信息</router-link>
				<!-- <router-link to="/downloadcenter">下载中心</router-link> -->
				 <!-- <router-link to="/allocations" active-class="hover">分配设置</router-link> -->
				 <!-- <router-link to="/reviewmonitoring" active-class="hover">评阅监控</router-link> -->
				 <!-- <router-link to="/scorerelease" active-class="hover">成绩管理</router-link> -->
			 </div>
		 </div>
		 <div class="headerPeople">
            <div class="gobackhome" @click="$router.push('/homework')"><i class="el-icon-arrow-left"></i>返回首页</div>
			 <ul>
				 <li @click="$router.push('/messagecenter')"><img src="../../assets/image/school/notice.jpg" alt=""></li>
				 <!-- <li @click="$router.push('/downloadcenter')"><img src="../../assets/image/school/download.jpg" alt=""></li> -->
			 </ul> 
			 <div class="rolelink">
				<b><i class="el-icon-sort"></i>切换角色</b>
				<div class="roleboxchildren">
					<span>校长</span>
					<span>班主任</span>
					<span>教师</span>
					<span>学科教师</span>
				</div>
			 </div>
			 <div>
				 <span v-if="countToken=={}" @click="login">登录</span>
				 <div v-else class="userInfo">
					<b><img src="../../assets/image/school/header.png"></b>
					<div class="headercontent">
						<span>{{countToken.name}}</span> 
						<span @click="$router.push('/personalinfor')">账号信息</span>
						<span @click="$router.push('/accountinfo')">账号安全</span>
						<span class="tuichu" @click="quite">退出登录</span>
					</div>
				 </div>
			 </div>
		 </div>
	</div>
</template>

<script>
	import { decrypt } from "../../utils/cryptojs";
	import {get,post,del,dele} from '../../request/api.js'
	export default{
		data(){
			return{
				countToken:{}
			}
		},
		mounted() {
			const alaynisData = decrypt(localStorage.getItem("accessToken"));
			this.countToken = JSON.parse(alaynisData)
		},
		methods:{
			isActive(...routes) {
			    // 如果传入的是一个路径数组，检查当前路径是否在数组中
			    if (Array.isArray(routes[0])) {
			      return routes[0].some(route => this.$route.path.startsWith(route));
			    }
			    // 如果传入的是单个路径，直接检查是否匹配
			    return routes.some(route => this.$route.path.startsWith(route));
			  },
			login(){
				// this.$router.push('/login')
				window.location.href = this.$loginUrl + '?type=133'
			},
			quite(){
				get('/auth/loginout')
				.then(res=>{
					//console.info(res)
					localStorage.removeItem('accessToken')
					window.location.href = this.$loginUrl
				})
			}
		}
	}
</script>

<style scoped>
.gobackhome{
	height:52px;
	background:Rgb(247, 249, 255);
	font-size:14px;
	color:#557292;
	line-height:52px;
	padding:0 14px;
	cursor: pointer;
}
.gobackhome i{
	font-style: normal;
}
.rolelink{
	font-size:14px;
	height:45px;
	position:relative;
}
.rolelink b{
	display: block;
	height:36px;
	border-radius:100px;
	border: 2px solid #D8E4F0;
	line-height:36px;
	color:#557292;
	padding:0 10px;
	margin-left:15px;
	cursor: pointer;
	margin-top:3px;
}
.rolelink i{
	display: inline-block;
	padding-right:4px;
}
	.logo{
		cursor: pointer;
	}
	.navLogo{
		display: flex;
		justify-content: left;
		align-items: center; 
	}
	.navLogo img{
		 width:92px;
		 height:28px
	}
	.navLogo div{
		padding-left:20px;
		display: flex;
		align-items: center;
	}
	.navLogo div a{
		display: block;
		color:#557292;
		font-size:16px;
		width:100px;
		text-align: center;
		position: relative;
		line-height:52px;
	}
	.navLogo div a::before{
		content:'';
		width: 1px;
		height: 8px;
		background:#DEE1E7;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.navLogo div a:last-child::before{
		content:'';
		width: 1px;
		height: 8px;
		background:#fff;
		position:absolute;
		right:0;
		top:50%;
		transform: translateY(-50%);
	}
	.navLogo div a:hover,.navLogo div a.hover{
		color:#295CFF;
	}
	.navLogo div a:hover::after,.navLogo div a.hover::after{
		content:'';
		width: 24px;
		height: 4px;
		background: #295CFF;
		border-radius: 2px;
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		bottom:0;
	}
	.headerPeople{
		display: flex;
		align-items: center;
	}
	.headerPeople ul{
		display: flex;
		align-items: center;
	}
	/* .headerContent ul li img{
	}
	.headerContent ul li:last-child img{
		width:100%;
		height:auto;
		border-radius:200px;
	} */
	.userInfo{
		display: flex;
		align-items: center;
		font-size:16px;
		color:#5677FB;
		position:relative;
		height:52px;
	}
	.userInfo b{
		display: block;
		width: 36px;
		height: 36px;
		border: 2px solid #D8E4F0;
		border-radius:100px;
		cursor: pointer;
		margin-left:14px;
		text-align: center;
	}
	.userInfo b img{
		padding-top:2px;
		width:28px;
	}
	.headerboxImage{
		border-radius:100px;
	}
	.headerContent{
		min-width: 1200px;
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		display: flex;
		justify-content: space-between;
		padding:0 40px;
		align-items: center;
	}
	.headerContent ul li{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border: 2px solid #D8E4F0;
		border-radius:100px;
		cursor: pointer;
		margin-left:14px;
	}
	.headercontent{
		box-sizing: border-box;
		position: absolute;
		left:32%;
		top:52px;
		width:140px;
		background:#fff;
		text-align: left;
		border-radius:6px;
		z-index:15;
		box-shadow: 0 0 5px rgba(0,0,0,0.6);
		display: none;
		transform: translateX(-50%);
	}
	.headercontent img{
		display: block;
		margin:0 auto 10px;
	}
	.headercontent span{
		display: block;
		line-height:36px;
		color:#333;
		cursor: pointer;
		padding:0px 20px;
	}
	.headercontent span:hover,.headercontent span.hover{
		background:#F2F3F5;
	}
	.headercontent span:first-child:hover,.headercontent span:first-child.hover{
		border-radius:6px 6px 0 0
	}
	.headercontent span:last-child:hover,.headercontent span:last-child.hover{
		border-radius:0px 0px 6px 6px;
	}
	.headercontent span.tuichu{
		color:rgb(236, 85, 90)
	}
	.jiantou{
		display: inline-block;
		margin-left:8px;
		width: 0;
		height: 0;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-top: 6px solid #5677FB; /* 蓝色三角箭头 */
	}
	.userInfo i{
		font-style:normal;
		cursor: pointer;
		color:rgb(236, 85, 90)
	}
	.userInfo:hover .jiantou{
		 transform: rotate(180deg);
	}
	.userInfo:hover .headercontent{
		display: block;
	}
	.rolelink:hover .roleboxchildren{
	    display: block;
	}
	.roleboxchildren{
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.roleboxchildren{
		box-sizing: border-box;
		position: absolute;
		left:32%;
		top:46px;
		width:140px;
		background:#fff;
		text-align: left;
		border-radius:6px;
		z-index:15;
		box-shadow: 0 0 5px rgba(0,0,0,0.6);
		display: none;
		transform: translateX(-50%);
	}
	.roleboxchildren img{
		display: block;
		margin:0 auto 10px;
	}
	.roleboxchildren span{
		display: block;
		line-height:36px;
		color:#333;
		cursor: pointer;
		padding:0px 20px;
	}
	.roleboxchildren span:hover,.roleboxchildren span.hover{
		background:#F2F3F5;
	}
	.roleboxchildren span:first-child:hover,.roleboxchildren span:first-child.hover{
		border-radius:6px 6px 0 0
	}
	.roleboxchildren span:last-child:hover,.roleboxchildren span:last-child.hover{
		border-radius:0px 0px 6px 6px;
	}
	.roleboxchildren span.tuichu{
		color:rgb(236, 85, 90)
	}
</style>